<%--
  ~ Copyright (c) 2016. 恒昌互联网运营中心.
  --%>

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" cotent="">
    <meta name="author" content="">
    <title>鹰眼监控平台-${title}</title>
    <%@ include file="/WEB-INF/views/common/include.jsp" %>
    <style type="text/css">
        .runtimeBar{
            display:inline-block;
            height:8px;
        }
    </style>

    <script type="text/javascript">
        var timer;
        $(document).ready(function () {
            //getRedisEnvList();
            //timer=setInterval("getData()", 5000);
            //$("#trace_tree_table").treetable({expandable: true});
            $('.form_datetime').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:ss',
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 0,
                forceParse: 0
            });

            changePlatform();

        });

        function changePlatform() {
            $.ajax({
                url : "getEnums",
                data : {
                    "platformName":$("#sel_platform").val()
                },
                success : function(result) {
                    if (result.code == "1") {
                        var enumVo = result.data;

                        $("#ul_clientNameList").empty();
                        for(var i=0;i<enumVo.clientNameList.length;i++) {
                            var v=enumVo.clientNameList[i];
                            $("#ul_clientNameList").append("<li><a href=\"#\" onclick=\"$('#txt_clientName').val('"+v+"');\">"+v+"</a></li>");
                        }
                        $("#ul_serviceNameList").empty();
                        for(var i=0;i<enumVo.serviceNameList.length;i++) {
                            var v=enumVo.serviceNameList[i];
                            $("#ul_serviceNameList").append("<li><a href=\"#\" onclick=\"$('#txt_serviceName').val('"+v+"');\">"+v+"</a></li>");
                        }
                        $("#ul_serviceCategoryList").empty();
                        for(var i=0;i<enumVo.serviceCategoryList.length;i++) {
                            var v=enumVo.serviceCategoryList[i];
                            $("#ul_serviceCategoryList").append("<li><a href=\"#\" onclick=\"$('#txt_serviceCategory').val('"+v+"');\">"+v+"</a></li>");
                        }
                        $("#ul_methodNameList").empty();
                        for(var i=0;i<enumVo.methodNameList.length;i++) {
                            var v=enumVo.methodNameList[i];
                            $("#ul_methodNameList").append("<li><a href=\"#\" onclick=\"$('#txt_methodName').val(getMethodName('"+v+"'));\">"+v+"</a></li>");
                        }
                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }

        function queryTraceInfo(pageNum) {
            //$(".diagram").sequenceDiagram({theme: 'simple'});
            if(pageNum>1){
                $("#txt_traceId").val("");
            }
            var sequenceStr="";
            /*
             if (traceId == "") {
             alertInfo("4", "请填写一个traceId!");
             return;
             }
             */
            var pageSize=30;
            if($("#txt_traceId").val()!=""){
                pageSize=2000;
            }
            $.ajax({
                url : "queryTraceInfo",
                data : {
                    "platformName":$("#sel_platform").val(),
                    "traceId":$("#txt_traceId").val(),
                    "rpcId":$("#txt_rpcId").val(),
                    "env":$("#sel_env").val(),
                    "serviceCategory":$("#txt_serviceCategory").val(),
                    "serviceName":$("#txt_serviceName").val(),
                    "clientName":$("#txt_clientName").val(),
                    "methodName":$("#txt_methodName").val(),
                    "runTimeMin":$("#txt_runTimeMin").val(),
                    "runTimeMax":$("#txt_runTimeMax").val(),
                    "fromDate":$("#fromDate").val(),
                    "toDate":$("#toDate").val(),
                    "userInfoType":$("#sel_userInfoType").val(),
                    "userInfoValue":$("#txt_userInfoValue").val(),
                    "rpcType":$("#sel_rpcType").val(),
                    "result":$("#sel_result").val(),
                    "paramIn":$("#txt_paramIn").val(),
                    "paramOut":$("#txt_paramOut").val(),
                    "clientIP":$("#txt_clientIP").val(),
                    "serverIP":$("#txt_serverIP").val(),
                    "requestSizeMin":$("#txt_requestSizeMin").val(),
                    "requestSizeMax":$("#txt_requestSizeMax").val(),
                    "responseSizeMin":$("#txt_responseSizeMin").val(),
                    "responseSizeMax":$("#txt_responseSizeMax").val(),
                    "pageNum":pageNum,
                    "pageSize":pageSize
                },
                success : function(result) {
                    if (result.code == "1") {
                        var trace_tree_html="";
                        trace_tree_html+="<table id=\"trace_tree_table\">";
                        trace_tree_html+="<caption>";
                        trace_tree_html+="<div style='float: left'>";
                        trace_tree_html+="  <a href=\"#\" onclick=\"jQuery('#trace_tree_table').treetable('expandAll'); return false;\">全部展开</a>";
                        trace_tree_html+="  <a href=\"#\" onclick=\"jQuery('#trace_tree_table').treetable('collapseAll'); return false;\">全部收缩</a>";
                        trace_tree_html+="</div>";
                        trace_tree_html+="<div style='float: right;margin-right: 220px' id='div_totalCount'>";
                        trace_tree_html+="</div>";
                        trace_tree_html+="</caption>";
                        trace_tree_html+="<thead>";
                        trace_tree_html+="  <tr>";
                        trace_tree_html+="      <th>调用链</th>";
                        trace_tree_html+="      <th>环境</th>";
                        trace_tree_html+="      <th>客户端名称</th>";
//                        trace_tree_html+="      <th>TraceId</th>";
                        trace_tree_html+="      <th>模块</th>";
                        trace_tree_html+="      <th>服务</th>";
                        trace_tree_html+="      <th>方法</th>";
                        trace_tree_html+="      <th>时间</th>";
                        trace_tree_html+="      <th>ClientIP</th>";
                        trace_tree_html+="      <th>ServerIP</th>";
                        trace_tree_html+="      <th>类型</th>";
                        trace_tree_html+="      <th>状态</th>";
                        trace_tree_html+="      <th>入/出参</th>";
                        trace_tree_html+="      <th>流量</th>";
                        trace_tree_html+="      <th>耗时</th>";
                        trace_tree_html+="      <th style=\"min-width: 200px\"></th>";
                        trace_tree_html+="  </tr>";
                        trace_tree_html+="</thead>";
                        trace_tree_html+="<tbody>";

                        var allTime=0;
                        var usedTime=0;
                        var currUsedTime=0;
                        var currPercent=100;
                        var usedPercent=0;
                        var lastTraceId="";
                        var totalTime=0
                        for(var i=0;i<result.data.length;i++) {
                            var traceInfoObject = result.data[i];
                            var env = traceInfoObject.env;
                            var rpcId = traceInfoObject.rpcId;
                            var traceId = traceInfoObject.traceId;
                            var parentId = rpcId;
                            var level = rpcId.split(".").length;
                            var userInfo = traceInfoObject.userInfo;
                            var phone = "";
                            var userId = "";
                            var customerId = "";
                            var realName = "";
                            if (userInfo != null) {
                                if (typeof(userInfo.phone) != "undefined") {
                                    phone = userInfo.phone;
                                }
                                if (typeof(userInfo.userId) != "undefined") {
                                    userId = userInfo.userId;
                                }
                                if (typeof(userInfo.customerId) != "undefined") {
                                    customerId = userInfo.customerId;
                                }
                                if (typeof(userInfo.realName) != "undefined") {
                                    realName = userInfo.realName;
                                }
                            }

                            var title = "env:"+env+"\nphone:" + phone + "\nuserId:" + userId + "\ncustomerId:" + customerId + "\nrealName:" + realName;

                            if (rpcId.length != 1 && traceId == lastTraceId) {
                                parentId = rpcId.substr(0, rpcId.lastIndexOf("."));
                                trace_tree_html += "<tr data-tt-id='" + traceId + rpcId + "' data-tt-parent-id='" + traceId + parentId + "' title='" + title + "' onclick='$(\"#txt_traceId\").val(\"" + traceId + "\")'> ";
                                if (level == 2) {
                                    currUsedTime = traceInfoObject.runTime;
                                    if (allTime > 0) {
                                        currPercent = currUsedTime / allTime * 100;
                                        usedPercent = usedTime / allTime * 100;
                                    }
                                    usedTime = usedTime + currUsedTime;
                                }
                            } else {
                                trace_tree_html += "<tr data-tt-id='" + traceId + rpcId + "' title='" + title + "' onclick='$(\"#txt_traceId\").val(\"" + traceId + "\")'>";
                                allTime = traceInfoObject.runTime;
                                usedTime = 0;
                                currPercent = 100;
                                usedPercent = 0;
                                totalTime+=traceInfoObject.runTime;
                            }
                            lastTraceId = traceId;

                            var color = "#31b0d5";//蓝
                            if (traceInfoObject.runTime > 500) {
                                color = "#b92c28;"//红
                            } else if (traceInfoObject.runTime > 250) {
                                color = "#d8d50c;"//黄
                            }

                            var resultColor = "";
                            if (traceInfoObject.result != "OK") {
                                resultColor = "red";
                            }

                            trace_tree_html += "<td nowrap>" + rpcId + "</td>";
                            trace_tree_html += "<td nowrap>" + env + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.clientName + "</td>";
//                            trace_tree_html+="<td>"+traceId+"</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.serviceCategory + "</td>";
                            var serviceNameShot=traceInfoObject.serviceName;
                            if(serviceNameShot.length>30){
                                serviceNameShot=serviceNameShot.substring(0,30)+"...";
                            }
                            trace_tree_html += "<td nowrap title='"+traceInfoObject.serviceName+"'>" + serviceNameShot + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.methodName + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.requestDateTime + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.clientHost + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.serverHost + "</td>";
                            trace_tree_html += "<td nowrap>" + traceInfoObject.rpcType + "</td>";
                            trace_tree_html += "<td nowrap style=\"background-color:" + resultColor + "\">" + traceInfoObject.result + "</td>";
                            trace_tree_html += "<td nowrap align='center'>";
                            var newId = traceId + rpcId.replace(/\./g, "") + traceInfoObject.clientName + traceInfoObject.requestDateTime.replace(/\./g, "").replace(/\:/g, "").replace(/ /g, "");
                            trace_tree_html += "<code id='request_json_" + newId + "' style='display: none'>" + traceInfoObject.requestJson + "</code>";
                            trace_tree_html += "<code id='response_json_" + newId + "' style='display: none'>" + traceInfoObject.responseJson + "</code>";
                            trace_tree_html += "  <button type='button' class='btn btn-success btn-xs' onclick='displayParametersJson(\"" + newId + "\",\""+traceInfoObject.requestSize+"\",\""+traceInfoObject.responseSize+"\")'>参</button>";
                            trace_tree_html += "  <button type='button' class='btn btn-primary btn-xs' onclick='displayJavaLog(\"" + traceId + "\",\"" + rpcId + "\",\"" + traceInfoObject.requestDateTime + "\")'>日</button>";
                            trace_tree_html+="</td>";
                            var trafficSize=traceInfoObject.requestSize+traceInfoObject.responseSize;
                            trace_tree_html+="<td nowrap>"+calTrafficSize(trafficSize)+"</td>";
                            trace_tree_html+="<td nowrap>"+traceInfoObject.runTime+"ms</td>";
                            if($("#txt_traceId").val()==""){
                                trace_tree_html += "<td><span></span></td>";
                            }else if(level<=2) {
                                if(currPercent>100) {
                                    currPercent = 100;
                                }
                                trace_tree_html += "<td><div style=\"display:inline-block;margin-left:" + usedPercent + "%;width:" + (currPercent) + "%;height:8px;background-color:" + color + ";\"></div></td>";
                            }else{
                                trace_tree_html += "<td><span></span></td>";
                            }
                            trace_tree_html+="</tr>";

                            //画时序图
                            if(traceInfoObject.clientName!="" && traceInfoObject.clientName!=null){
                                var seq_client=traceInfoObject.clientName.replace(new RegExp(/(-)/g),'_').replace("_ice","");
                                var seq_service=traceInfoObject.serviceCategory.replace("IceService","");
                                if(seq_service.indexOf("ProductManager")>-1){
                                    seq_service="product";
                                }else if(seq_service.indexOf("AasAccounting")>-1){
                                    seq_service="account";
                                }else if(seq_service.indexOf("MarketingAcitvitie")>-1){
                                    seq_service="marketing";
                                }
                                seq_service = seq_service.toLowerCase().replace(new RegExp(/(-)/g),'_').replace("csc","csc_");
                                sequenceStr+=seq_client+"->"+seq_service+": "+"["+traceInfoObject.rpcId+"]"+traceInfoObject.methodName+"["+traceInfoObject.runTime+"ms]";

                                if(traceInfoObject.result!="OK"){
                                    sequenceStr+="(ERROR)";
                                }
                                sequenceStr+="\n";
                            }
                        }
                        trace_tree_html+="</tbody>";
                        trace_tree_html+="</table>";
                        $("#div_trace_tree_table").html(trace_tree_html);
                        $("#trace_tree_table").treetable({expandable: true});
                        $("#trace_tree_table").treetable('expandAll');
                        if($("#txt_traceId").val()!=""){
                            displaySequence(sequenceStr);
                        }else{
                            $('#diagram').html("");
                        }
                        var div_totalCountHtml="共计:"+result.page.totalCount+"条";
                        if($("#txt_traceId").val()!=""){
                            div_totalCountHtml+="&nbsp;总耗时:"+totalTime+"ms";
                        }
                        $("#div_totalCount").html(div_totalCountHtml);
                        if(pageNum==1){
                            $('#pager').extendPagination({
                                totalCount: result.page.totalCount,
                                limit: pageSize,
                                showPage: 10,
                                callback: function (curr, limit, totalCount) {
                                    queryTraceInfo(curr);
                                }
                            });
                        }
                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }
        function calTrafficSize(trafficSize) {
            var unit = "";
            var size=0;
            if(trafficSize>(1024*1024)){
                size=(trafficSize/(1024*1024)).toFixed(1);
                unit = "MB";
            }else if(trafficSize>1024){
                size=(trafficSize/1024).toFixed(1);
                unit = "KB";
            }else{
                size="-";
            }
            return size+unit;
        }
        function displaySequence(sequenceStr){
            $('#diagram').html("");
            var diagram = Diagram.parse(sequenceStr);
            diagram.drawSVG('diagram', {theme: 'simple'});

        }

        function displayParametersJson(id,requestSize,responseSize) {
            $('#requestJsonText').val($("#request_json_" + id).text());
            $('#responseJsonText').val($("#response_json_" + id).text());
            $('#requestSize').html(calTrafficSize(requestSize));
            $('#responseSize').html(calTrafficSize(responseSize));
            $('#parametersModal').modal('show');
        }
        function displayJavaLog(traceId,rpcId,requestDate) {
            $.ajax({
                url : "queryJavaLog",
                data : {
                    "traceId":traceId,
                    "rpcId":rpcId,
                    "fromDate":requestDate
                },
                success : function(result) {
                    if (result.code == "1") {
                        var logStr = "<table class=\"table table-bordered\">";
                        logStr += "<thead>";
                        logStr += "<tr>";
                        logStr += "<th>time</th>";
                        logStr += "<th>level</th>";
                        logStr += "<th >class</th>";
                        logStr += "<th>method</th>";
                        logStr += "<th>message</th>";
                        logStr += "</tr>";
                        logStr += "</thead>";
                        logStr += "<tbody>";
                        for(var i=0;i<result.data.length;i++) {
                            var javaLogObject = result.data[i];
                            logStr += "<tr>";
                            logStr += "<td>"+javaLogObject.timestamp+"</td>";
                            logStr += "<td>"+javaLogObject.level+"</td>";
                            logStr += "<td style='min-width: 150px;word-wrap:break-word;word-break:break-all;'>"+javaLogObject.location.className+"("+javaLogObject.location.line+")"+"</td>";
                            logStr += "<td style='min-width: 150px;word-wrap:break-word;word-break:break-all;'>"+javaLogObject.location.method+"</td>";
                            logStr += "<td style='word-wrap:break-word;word-break:break-all;'>"+javaLogObject.message+"</td>";
                            logStr += "</tr>";
                        }
                        logStr += "</tbody>";
                        logStr += "</table>";
                        $('#basicInfoLabel').html("traceId:["+traceId+"-"+rpcId+"]相关Java日志");
                        $('#basicInfoDiv').html(logStr);
                        $('#basicInfoModal').modal('show');
                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }

        function displayResponseJson(json) {
            $('#basicInfoLabel').html("Response Json:");
            $('#basicInfoDiv').html(json);
            $('#basicInfoModal').modal('show');

        }

        /**type:1:success,2:info,3:warning,4:danger*/
        function alertInfo(type, msg) {
            if (type == "1") {
                $.scojs_message(msg, $.scojs_message.TYPE_OK);
            } else if (type == "4") {
                $.scojs_message(msg, $.scojs_message.TYPE_ERROR);
            }
        }

        function getMethodName(methodName) {
            var startIndex=methodName.indexOf("(");
            var endIndex=methodName.indexOf(")");
            if (startIndex>-1&&endIndex>-1) {
                return methodName.substr(startIndex+1, endIndex-startIndex-1);
            }
            return methodName;
        }
    </script>
</head>
<body>
<%@ include file="/WEB-INF/views/common/top.jsp" %>
<div class="container-fluid">
    <%@ include file="/WEB-INF/views/common/left.jsp" %>


    <div class="col-sm-10 col-sm-offset-2 col-md-11 col-md-offset-1 chartDiv">
        <h2 class="page-header">${title}</h2>
        <form class="form-inline " action="nodeStatus" method="post">
            <div class="form-group">
                <label>平台名称:</label>
                <select id="sel_platform" name="sel_platform" class="form-control input-sm" onchange="changePlatform()" style='width: 120px;margin-right:10px' >
                    <c:forEach items="${platformList}" var="platform">
                        <option value="${platform.name}">${platform.describe}(${platform.name})</option>
                    </c:forEach>
                </select>

                <label>用户信息:</label>
                <select id="sel_userInfoType" name="sel_userInfoType" class="form-control input-sm" style='width: 100px;'>
                    <option value="">全部</option>
                    <c:forEach items="${userInfoTypeList}" var="userInfoType">
                        <option value="${userInfoType}">${userInfoType}</option>
                    </c:forEach>
                </select>
                <input type='text' class='form-control input-sm' id='txt_userInfoValue' name='txt_userInfoValue' value=''  style='width: 120px;margin-right:10px'>

                <label>客户端:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_clientNameList">
                            <c:forEach items="${clientNameList}" var="clientName">
                                <li><a href="#" onclick="$('#txt_clientName').val('${clientName}');">${clientName}</a></li>
                            </c:forEach>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_clientName' name='txt_clientName' value=''  style='width: 120px;margin-right:10px'>
                </div><!-- /input-group -->

                <label>模块:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_serviceCategoryList">
                            <c:forEach items="${serviceCategoryList}" var="serviceCategory">
                                <li><a href="#" onclick="$('#txt_serviceCategory').val('${serviceCategory}');">${serviceCategory}</a></li>
                            </c:forEach>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_serviceCategory' name='txt_serviceCategory' value=''  style='width: 120px;margin-right:10px'>
                </div><!-- /input-group -->
                <label>服务:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_serviceNameList">
                            <c:forEach items="${serviceNameList}" var="serviceName">
                                <li><a href="#" onclick="$('#txt_serviceName').val('${serviceName}');">${serviceName}</a></li>
                            </c:forEach>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_serviceName' name='txt_serviceName' value=''  style='width: 120px;margin-right:10px'>
                </div><!-- /input-group -->
                <label>方法:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_methodNameList">
                            <c:forEach items="${methodNameList}" var="methodName">
                                <script>alert(${methodName})</script>
                                <li><a href="#" onclick="$('#txt_methodName').val(getMethodName('${methodName}'));">${methodName}</a></li>
                            </c:forEach>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_methodName' name='txt_methodName' value=''  style='width: 120px;margin-right:10px'>
                </div><!-- /input-group -->
            </div>

            <div class="clearfix"></div>
            <div class="form-group">
                <label>部署环境:</label>
                <select id="sel_env" name="sel_env" class="form-control input-sm" style='width: 120px;margin-right:10px'>
                    <option value="">全部</option>
                    <c:forEach items="${envList}" var="env">
                        <option value="${env}">${env}</option>
                    </c:forEach>
                </select>
                <label>日期范围:</label>
                <div  class="form-inline input-group date form_datetime input-sm" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" style='width: 260px;'>
                    <input class="form-control input-sm" id="fromDate" name="fromDate" type="text" value="">
                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-remove"></span></span>
                </div>
                <label>至</label>
                <div  class="form-inline input-group date form_datetime input-sm" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" style='width: 260px;'>
                    <input class="form-control input-sm" id="toDate" name="toDate" type="text" value="">
                    <span class="input-group-addon input-sm "><span class="glyphicon glyphicon-calendar"></span></span>
                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-remove"></span></span>
                </div>
                <label>类型:</label>
                <select id="sel_rpcType" name="sel_rpcType" class="form-control input-sm" style='width: 80px;margin-right:10px'>
                    <option value="">全部</option>
                    <c:forEach items="${rpcTypeList}" var="rpcType">
                        <option value="${rpcType}">${rpcType}</option>
                    </c:forEach>
                </select>

                <label>结果:</label>
                <select id="sel_result" name="sel_result" class="form-control input-sm" style='width: 80px;margin-right:10px'>
                    <option value="">全部</option>
                    <c:forEach items="${resultList}" var="result">
                        <option value="${result}">${result}</option>
                    </c:forEach>
                </select>

                <label>耗时:</label>
                <input type='text' class='form-control input-sm' id='txt_runTimeMin' name='txt_runTimeMin' value=''  style='width: 60px;'>
                <label>-</label>
                <input type='text' class='form-control input-sm' id='txt_runTimeMax' name='txt_runTimeMax' value=''  style='width: 60px;'>
                <label>毫秒</label>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label>ClientIP:</label>
                <input type='text' class='form-control input-sm' id='txt_clientIP' name='txt_clientIP' value='' style='width: 100px;margin-right:10px'>
                <label>ServerIP:</label>
                <input type='text' class='form-control input-sm' id='txt_serverIP' name='txt_serverIP' value='' style='width: 100px;margin-right:10px'>
                <label>入参:</label>
                <input type='text' class='form-control input-sm' id='txt_paramIn' name='txt_paramIn' value='' style='width: 200px;margin-right:10px'>
                <label>出参:</label>
                <input type='text' class='form-control input-sm' id='txt_paramOut' name='txt_paramOut' value='' style='width: 200px;margin-right:10px'>
                <label>入参大小:</label>
                <input type='text' class='form-control input-sm' id='txt_requestSizeMin' name='txt_requestSizeMin' value=''  style='width: 60px;'>
                <label>-</label>
                <input type='text' class='form-control input-sm' id='txt_requestSizeMax' name='txt_requestSizeMax' value=''  style='width: 60px;'>
                <label>KB</label>
                <label>出参大小:</label>
                <input type='text' class='form-control input-sm' id='txt_responseSizeMin' name='txt_responseSizeMin' value=''  style='width: 60px;'>
                <label>-</label>
                <input type='text' class='form-control input-sm' id='txt_responseSizeMax' name='txt_responseSizeMax' value=''  style='width: 60px;'>
                <label>KB</label>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label>调用链ID:</label>
                <div  class="form-inline input-group  input-sm" data-date=""  style='width: 260px;margin-right:10px'>
                    <input type='text' class='form-control input-sm' id='txt_traceId' name='txt_traceId' value='' maxlength="32" style='width: 240px;'>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove" style="cursor: pointer" onclick="$('#txt_traceId').val('');"></span></span>
                </div>
                <label>rpcId:</label>
                <input type='text' class='form-control input-sm' id='txt_rpcId' name='txt_rpcId' value='' style='width: 60px;margin-right:10px'>
                <button type='button' class='btn btn-primary' onclick='queryTraceInfo(1)'>查 询</button>
                <label>(调用链ID不为空时，将仅使用调用链ID搜索)</label>
            </div>
        </form>


        <div class="clearfix"></div>

        <div class='col-md-12' id="div_trace_tree_table">
            <%--
            <table id="trace_tree_table">
                <caption>
                    <a href="#" onclick="jQuery('#trace_tree_table').treetable('expandAll'); return false;">全部展开</a>
                    <a href="#" onclick="jQuery('#trace_tree_table').treetable('collapseAll'); return false;">全部收缩</a>
                </caption>
                <thead>
                <tr>
                    <th>调用链</th>
                    <th>应用</th>
                    <th>ClientIP</th>
                    <th>ServerIP</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>服务/方法</th>
                    <th>耗时</th>
                    <th style="min-width: 200px"></th>
                </tr>
                </thead>
                <tbody id="trace_tree_tbody">
                    <tr data-tt-id='1'>
                        <td>1</td>
                        <td>Lend</td>
                        <td>10.150.24.11</td>
                        <td>10.150.24.11</td>
                        <td>ICE</td>
                        <td>OK</td>
                        <td>ZqppIceService.getRepaymentPlan</td>
                        <td>100ms</td>
                        <td align="center"><span class="runtimeBar" style="width:100%;background-color:#b92c28;"></span></td>
                    </tr>
                    <tr data-tt-id='1.1' data-tt-parent-id='1'>
                        <td>1.1</td>
                        <td>Pay</td>
                        <td>10.150.24.13</td>
                        <td>10.150.24.13</td>
                        <td>ICE</td>
                        <td>OK</td>
                        <td>TaskIceService.getBatchJobByChannel</td>
                        <td>50ms</td>
                        <td><span style="display:inline-block;margin-left:0%;width:50%;height:8px;background-color:#c6c30c;"></span></td>
                    </tr>
                    <tr data-tt-id='1.1.1' data-tt-parent-id='1.1'>
                        <td>1.1.1</td>
                        <td>Loan</td>
                        <td>10.150.24.12</td>
                        <td>10.150.24.12</td>
                        <td>ICE</td>
                        <td>OK</td>
                        <td>ZqppIceService.getRepaymentPlan</td>
                        <td>10ms</td>
                        <td><span style="display:inline-block;margin-left:50%;width:10%;height:8px;background-color:#31b0d5;"></span></td>
                    </tr>
                    <tr data-tt-id='1.2' data-tt-parent-id='1'>
                        <td>1.2</td>
                        <td>User</td>
                        <td>10.150.24.11</td>
                        <td>10.150.24.11</td>
                        <td>ICE</td>
                        <td>OK</td>
                        <td>ZqppIceService.getRepaymentPlan</td>
                        <td>30ms</td>
                        <td><span style="display:inline-block;margin-left:60%;width:30%;height:8px;background-color:#31b0d5;"></span></td>
                    </tr>
                    <tr data-tt-id='1.2.1' data-tt-parent-id='1.2'>
                        <td>1.2.1</td>
                        <td>Account</td>
                        <td>10.150.24.11</td>
                        <td>10.150.24.11</td>
                        <td>ICE</td>
                        <td>OK</td>
                        <td>ZqppIceService.getRepaymentPlan</td>
                        <td>10ms</td>
                        <td><span style="display:inline-block;margin-left:90%;width:10%;height:8px;background-color:#d8d50c;"></span></td>
                    </tr>
                </tbody>
            </table>
            --%>
        </div>
        <div id="pager" style="width: auto;display: table;margin-left: auto;margin-right: auto;"></div>
        <div id="diagram" class="diagram">
            <%--

                        dlr_h5->lend: lendOrderSubmit4DLT
                        lend->user: doUserStatusSearch
                        lend->product: getProductList
                        lend->acount: hyrQueryBalance
                        lend->marketing: queryOwnerAvailableCoupons
                        marketing->user: doUserQueryAssetInfo
                        user->acount: hyrQueryBalance
                        marketing->product: getProductList
                        lend->acount: hyrVerifyTradePwd
                        lend->product: getProductList
                        lend->pay:freeze
                        pay->acount:hyrFreezeAmt
                        pay->user:doUserUpdateAssetInfo
                        lend->user:doUserInfoSearch
                        lend->user:doUserUpdateAssetInfo
                        lend->manager:sendSms
            --%>

        </div>

        <!-- 详细信息框（Modal） -->
        <div class="modal fade" id="basicInfoModal" tabindex="-1" role="dialog" aria-labelledby="basicInfoLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="basicInfoLabel">xxx</h4>
                    </div>
                    <div class="modal-body">
                        <div id="basicInfoDiv"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <!-- 参数信息框（Modal） -->
        <div class="modal fade" id="parametersModal" tabindex="-1" role="dialog" aria-labelledby="parametersLabel" aria-hidden="true" >
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="parametersLabel">入参出参</h4>
                    </div>
                    <div class="modal-body">
                        <div id="parametersDiv">
                            <div style="float: left">入参：</div><div style="float: right" id="requestSize"></div>
                            <textarea id="requestJsonText" class="form-control" rows="15"></textarea>
                            <div style="float: left">出参：</div><div style="float: right" id="responseSize"></div>
                            <textarea id="responseJsonText" class="form-control" rows="15"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</body>
</html>
